<template>
  <div>
    <subhead></subhead>
    <div class="page-all">
      <div class="sign-container">
        <div class="sign-head clearfix">
          <div class="fl label orange">手机注册</div>
          <div class="fr tosign">
            <span>已有账号?</span>
            <router-link to="/login">马上登录</router-link>
            <a href="#"></a>
          </div>
        </div>
        <div class="sign-body">
          <div class="sbody-form">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="手机号码">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item label="邀请码">
                <el-input v-model="form.invite"></el-input>
              </el-form-item>
              <el-form-item label="设置密码">
                <el-input v-model="form.password" type="password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="form.password" type="password"></el-input>

                <div class="safe-label">
                  <span>安全程度:</span>
                  <span>
                    <el-rate v-model="safeValue" disabled text-color="#ff9900"></el-rate>
                  </span>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit" class="submit">立即注册</el-button>
              </el-form-item>
              <el-form-item>
                <el-checkbox label="我已同意并阅读" name="type"></el-checkbox>
                <a href="#" class="forget">《没得比用户协议》</a>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <mfooter></mfooter>
  </div>
</template>
<script>
import subhead from "@/components/subhead";
import mfooter from "@/components/mfooter";
export default {
  components: { subhead, mfooter },
  data() {
    return {
      form: {
        phone: "",
        invite: "",
        password: ""
      },
      safeValue: 3.7 //安全指数
    };
  },
  methods: {
    onSubmit: function() {
      console.log("提交");
    }
  }
};
</script>
<style lang="css">
.sign-container {
  border: 1px solid #efefef;
  background: #fff;
  padding: 6px 25px 60px;
  margin-bottom: 50px;
}
.sign-head {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e5e5e5;
  padding: 22px 0;
}

.sign-head .tosign a {
  color: skyblue;
}
.sign-body {
  background: url("../../assets/images/app.jpg") right top no-repeat;
}
.sbody-form {
  padding: 45px 0 30px;
}
.sbody-form .el-form-item {
  width: 400px;
}
.sbody-form .forget {
  float: right;
  color: skyblue;
}
.sbody-form .submit {
  width: 100%;
  background-color: #f85e23;
  border: 0;
}
.sbody-form .safe-label {
    font-size: 12px;
    color: #ccc;
}
</style>